<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>传说中的帮助文档</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <link rel="stylesheet" href="/static/css/global.css">

    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>

    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/npm.js"></script>

    <script src="https://cdn.bootcss.com/socket.io/2.3.0/socket.io.js"></script>

    <style>
        .fuck {
            border: 2px gray solid;
            margin: 1em;
            padding: 1em;
            border-radius: 0.8em;
            font-size: 1.3em;
            line-height: 1.5em;
        }
    </style>
</head>

<body>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#大致思路" data-toggle="tab">大致思路</a></li>
        <li><a href="#before_request" data-toggle="tab">before_request</a></li>
        <li><a href="#login页面" data-toggle="tab">login页面</a></li>
        <li><a href="#home页面" data-toggle="tab">home页面</a></li>
        <li><a href="#edit页面" data-toggle="tab">edit页面</a></li>
        <li><a href="#upload页面" data-toggle="tab">upload页面</a></li>
        <li><a href="#file_list页面" data-toggle="tab">file_list页面</a></li>
        <li><a href="#json_article_list页面" data-toggle="tab">json_article_list页面</a></li>
        <li><a href="#json_article_query页面" data-toggle="tab">json_article_query页面</a></li>
        <li><a href="#json_view_file页面" data-toggle="tab">json_view_file页面</a></li>
        <li><a href="#json_username页面" data-toggle="tab">json_username页面</a></li>
        <li><a href="#view_file页面" data-toggle="tab">view_file页面</a></li>
        <li><a href="#json_online_device_list页面" data-toggle="tab">json_online_device_list页面</a></li>
        <li><a href="#json_content_upload页面" data-toggle="tab">json_content_upload页面</a></li>
        <li><a href="#json_create_article页面" data-toggle="tab">json_create_article页面</a></li>
        <li><a href="#json_upload_base64页面" data-toggle="tab">json_upload_base64页面</a></li>
        <li><a href="#json_get_base64页面" data-toggle="tab">json_get_base64页面</a></li>
        <li><a href="#json_upload_base64_multiple页面" data-toggle="tab">json_upload_base64_multiple页面</a></li>
        <li><a href="#json_get_base64_multiple页面" data-toggle="tab">json_get_base64_multiple页面</a></li>
        <li><a href="/home" datatype="tab">返回主页</a></li>
    </ul>

    <div class="tab-content">

        <div class="tab-pane fade in fuck" id="json_upload_base64_multiple页面">
            FormData中需要两个东东：filenames和contents，两个都是JSON.stringify之后的列表，表示文件名和文件base64码的一一对应；<br>
        </div>

        <div class="tab-pane fade in fuck" id="json_get_base64_multiple页面">
            FormData中需要一个东东：filenames，是一个JSON.stringify之后的列表，表示文件名，任意一个文件不存在在会导致页面返回404；<br>
        </div>

        <div class="tab-pane fade in fuck" id="json_upload_base64页面">
            支持get和post <br>
            提供以下表单数据：<br>
            filename：文件名 <br>
            content：文件对应的base64码 <br>
            文件将会被储存在服务器，可以使用 <a href="/view_file" target="_blank" class="btn btn-info">查看</a>
        </div>

        <div class="tab-pane fade in fuck" id="json_get_base64页面">
            支持get和post；<br>
            需要在表单数据中提供filename文件名；<br>
            返回base64码（字符串形式）<br>
            文件不存在会返回404 <br>
        </div>

        <div class="tab-pane fade in fuck" id="json_online_device_list页面">
            返回在线设备名单，json格式；
            <hr>
            支持get方法和post方法
            <hr>
            <a class="btn btn-default" href="/json/online_device_list" target="_blank">尝试一下</a>
        </div>

        <div class="tab-pane fade in fuck" id="json_create_article页面">
            支持post和get <br>
            新建一个文章，如果formdata里有title，使用formdata里的title，如果没有，默认使用"new title"， <br>
            <hr>
            <button class="btn btn-default" onclick="create_article()">尝试一下</button>
            <label>
                <input type="text" class="form-control" placeholder="请输入标题（可选）" id="create_article_title">
            </label>
        </div>

        <div class="tab-pane fade in fuck" id="json_content_upload页面">
            URL: /json/content_upload?device_id=xx&art_id=xx&art_title=xx&time=xxxx <br>
            上传指定的文章内容到指定的设备。 <br>
            数据全部由查询字符串提供。 <br>
            支持get和post <br>
        </div>

        <div class="tab-pane fade in fuck" id="json_view_file页面">
            新增一个页面，访问“/json/view_file”路径，得到当前用户（用户信息从session中取得）在服务器上的所有文件，自己试一下；
            <hr>
            所有json开头的路径均支持get和post；
            <hr>
            <a href="/json/view_file" class="btn btn-default">尝试一下</a>
        </div>

        <div class="tab-pane fade in fuck" id="json_username页面">
            访问“/json/username”路径，得到当前登录用户的用户名；
            <hr>
            所有json开头的路径均支持get和post；
            <hr>
            <a href="/json/username" class="btn btn-default">尝试一下</a>
        </div>

        <div class="tab-pane fade in fuck" id="view_file页面">
            主页导航栏的查看服务器文件按钮。
        </div>

        <div class="tab-pane fade active in fuck" id="大致思路">

            根据我提供的接口，编写“主页”，“编辑”，“上传”三个页面，基本实现类似的功能；
            <hr>
            <h1>主页</h1>
            提供用户所有PPT的一个清单，每个PPT可以转向自己的编辑和上传页面；再单独提供一个新建按钮。
            <hr>

            <h1>编辑</h1>
            编辑、新建、删除、放映；能把页面布局保存成json储存到服务器；能从服务器接收配置并重建页面；
            <hr>

            <h1>上传</h1>
            提供一个在线设备的清单，主要用到/json/online_device_list和/json/content_upload?device_id=xx&art_id=xx&art_title=xx两个接口.

        </div>
        <div class="tab-pane fade fuck" id="before_request">
            所有的请求在被处理之前，服务器会检查cookie，如果没有相关的登录信息的话（或者上次登录超过了30天），重定向到登陆页面；
            当然，本来就要去登陆页面的话，不会无限重定向。
        </div>
        <div class="tab-pane fade fuck" id="login页面">
            直接登录，没什么好说的。
        </div>
        <div class="tab-pane fade fuck" id="home页面">
            这里展示用户所有的文章，提供编辑和新建按钮，也提供上传按钮；
        </div>
        <div class="tab-pane fade fuck" id="edit页面">
            <h2>如果是要新建文章</h2>
            提供以下formData： <br>
            create=true; 模拟按钮按下 <br>
            title：文章的标题 <br>
            content：文章的内容 <br>
            <hr>

            <h2>如果是要删除文章</h2>
            提供以下formData：<br>
            delete=true：模拟按钮按下 <br>
            id_debug, title_debug：要删除的文章在数据库中的id和title <br>
            <hr>

            <h2>如果是要修改文章</h2>
            提供以下formData <br>
            edit=true; 模拟按钮按下 <br>
            id_debug, title_debug：要修改的文章在数据库中的id和title <br>
            title：新的标题（如果没有修改原样发上来） <br>
            content：新的内容（如果没有修改原样发上来） <br>
            <hr>

            <h2>以上内容都使用post方法</h2>
        </div>
        <div class="tab-pane fade fuck" id="upload页面">
            功能未完成，尽情期待。<br>
            朱晋快学socket.io
        </div>
        <div class="tab-pane fade fuck" id="file_list页面">
            多文件上传页面，上传一个叫files的multiple的input=file表单，服务器设置每个文件都不能超过100M。 <br>
            放单个文件也没有问题。<br>
            应该可以直接Ajax。 <br>
            使用 “域名/static/users/用户名，比如jiajun/文件名”查看文件是否上传成功（至少图片文件可以这么看） <br>
        </div>
        <div class="tab-pane fade fuck" id="json_article_list页面">
            返回一个用户对应的所有“文章”的JSON格式的字符串数据，用户名从cookie中提取，自己试一下。 <br>
            URL是：域名/json/article_list

            <hr>
            所有json开头的路径均支持get和post；
            <hr>
            <a href="/json/article_list" class="btn btn-default">尝试一下</a>
        </div>
        <div class="tab-pane fade fuck" id="json_article_query页面">
            这个会返回某一篇文章的主题的json格式的数据，用户名从cookie中提取，但id和title需要以查询字符串的形式添加在URL后，比如
            "域名/json/article_query?id=4&title=this_is_title"。 <br>
            <hr>
            所有json开头的路径均支持get和post；
            <hr>
        </div>
    </div>

    <script>
        function create_article() {
               let title = $('#create_article_title').val();
               let formdata = new FormData();

               if (title.length !== 0) {
                   formdata.append('title', title);
               }

               $.ajax({
                   type: 'post',
                   url: '/json/create_article',
                   data: formdata,
                   contentType: false,
                   processData: false,
                   success: function (data) {
                       alert(JSON.stringify(data));
                       location.href = location.origin + '/home';
                   },
               });
        }
    </script>
</body>

</html>
